<template>
  <div class="skillbox flex-inherit" ref="skills" @mouseleave="mouseleave()">
    <div class="skill flex">
      <div class="content flex" ref="skill">
        <transition name="fade-left">
          <div v-show="skillshow" class="skillimg">
            <img :src="imgUrl" alt="" />
          </div>
        </transition>

        <transition name="fade-right">
          <div v-show="!skillshow" class="skillnumber" ref="number">
            <slot name="number"></slot>
          </div>
        </transition>
      </div>

      <div class="loading1"></div>
      <div class="loading2"></div>
    </div>
    <span class="skilltext"><slot name="text"></slot></span>
  </div>
</template>

<script>
import { DeBounce } from "@/assets/js/DeBounce";

export default {
  name: "skill",
  data() {
    return {
      skillshow: true,
    };
  },
  props: {
    img: {
      type: String,
      required: true,
    },
  },
  methods: {
    skillEnter() {
      this.skillshow = false;
      let endnumber = parseInt(this.$refs.number.innerText);
      let nownumber = 0;
      if (endnumber) {
        let timer = setInterval(() => {
          nownumber === endnumber ? clearInterval(timer) : (nownumber += 1);
          this.$refs.number.innerHTML = `${nownumber}%`; 
        }, 10);
      }
    },
    mouseleave() {
      this.skillshow = true;
    },
  },
  mounted() {
    this.$refs.skills.addEventListener(
      "mouseenter",
      DeBounce(this.skillEnter, 1000, true)
    );
  },
  computed: {
    imgUrl() {
      return require("@/assets/img/skill/" + this.img);
    },
  },
};
</script>

<style scoped>
.skillbox {
  margin-right: 50px;
  width: 102px;
}
.skill {
  width: 100px;
  height: 100px;
  border: 1px dashed gray;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.content {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #666666;
  position: relative;
}
.skillimg img {
  width: 30px;
}
.skilltext {
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0;
  color: black;
  width: 100px;
  word-wrap: break-word;
}
.loading1 {
  position: absolute;
  width: 70px;
  height: 70px;
  background: -webkit-linear-gradient(-70deg, #a2facf 0%, #64acff 100%);
  border-radius: 50%;
  z-index: 2;
  clip: rect(0px 70px 50px 35px);
  animation: wavemove 2s infinite;
  animation-timing-function: linear;
  display: none;
}
.loading2 {
  position: absolute;
  width: 80px;
  height: 80px;
  background: -webkit-linear-gradient(-70deg, #db469f 0%, #2188ff 100%);
  border-radius: 50%;
  z-index: 1;
  clip: rect(0px 50px 40px 0px);
  animation: wavemove 1s infinite;
  animation-timing-function: linear;
  display: none;
}
.skill:hover .loading1 {
  display: block;
}
.skill:hover .loading2 {
  display: block;
}
@keyframes wavemove {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.skillnumber {
  color: white;
  font-weight: bold;
  font-size: 0.9rem;
}
</style>